﻿
@model Coevery.Projections.ViewModels.ProjectionEditViewModel
@{
    var sortedBy = Model.Fields.Select(c => new SelectListItem {Selected = (c.Type == Model.SortedBy), Text = c.Name.Text}).ToList();

    var sortMode = new List<SelectListItem>();
    sortMode.Add(new SelectListItem { Selected = Model.SortMode == "Desc", Text = "Desc" });
    sortMode.Add(new SelectListItem { Selected = Model.SortMode == "Asc", Text = "Asc" });

    var visableTo = new List<SelectListItem>();
    visableTo.Add(new SelectListItem { Selected = Model.VisableTo == "All", Text = "All" });
    visableTo.Add(new SelectListItem { Selected = Model.VisableTo == "Me", Text = "Me" });

    var pageRowCount = new List<SelectListItem>();
        pageRowCount.Add(new SelectListItem { Selected = Model.VisableTo == "50", Text = "50" });
        pageRowCount.Add(new SelectListItem { Selected = Model.VisableTo == "100", Text = "100" });
        pageRowCount.Add(new SelectListItem { Selected = Model.VisableTo == "200", Text = "200" });
}
<header id="page-title">
    <h1 class="pull-left">View Detail <span>show view detail information</span></h1>
</header>
<section id="main-content">
    <div id="page-actions" class="clearfix">
        <btn-actions>
            <button class="btn btn-small" data-ng-click="exit()">Back</button>
            <button class="btn btn-primary btn-small" data-indi-click="saveAndView()">Save</button>
            <button class="btn btn-primary btn-small" data-indi-click="saveAndBack()">Save & Back</button>
        </btn-actions>
    </div>
    @using (Html.BeginFormAntiForgeryPost(Url.Action("Edit", new { Id = Model.Id, ReturnUrl = Request.QueryString["ReturnUrl"] }),
                                                  FormMethod.Post,
                                                  new { @class = "form-horizontal", @name = "myForm", @ng_submit = "save()" })) {
                
        <div class="row-fluid">
            <div class=" form-container edit-mode">
                <div class="form-horizontal no-border">
                    <fieldset>
                        <legend>
                            <h5>General Info</h5>
                        </legend>

                        <section class="data-row control-group">
                            <div class="span6">
                                <label class="control-label">Name</label>
                                <div class="controls">
                                    @Html.TextBoxFor(m => m.ItemContentType, new { @class = "span12", @disabled = "disabled" })
                                    @Html.HiddenFor(m => m.ItemContentType)
                                    @Html.HiddenFor(m => m.IsDefault)
                                </div>
                            </div>
                            <div class="span6">
                                    <label class="control-label required">Display Name</label>
                                <div class="controls errortips">
                                    @Html.TextBoxFor(m => m.DisplayName, new { @class = "span12",required="" })
                                </div>
                            </div>
                        </section>


                        <section class="data-row control-group">
                            <div class="span6">
                                    <label class="control-label">Visable To</label>
                                <div class="controls">
                                    @Html.DropDownListFor(m => m.VisableTo, visableTo, string.Empty, new { @class = "span12", @id = "visableto" })
                                </div>
                            </div>
                            <div class="span6">
                                    <label class="control-label">Page Row Count</label>
                                <div class="controls">
                                        @Html.DropDownListFor(m => m.PageRowCount, pageRowCount, null , new { @class = "span12", @id = "pageRowCount" })
                                </div>
                            </div>
                        </section>
                    </fieldset>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12 form-container edit-mode">
                <div class="form-horizontal no-border">
                    <fieldset>
                        <legend>
                            <h5>Select Fields to Display</h5>
                        </legend>
                        <div class="row-fluid">
                            <div class="span12">
                                <div class="span6">
                                    <div class="viewfields-widget">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Fields</th>
                                                    <th class="rightCell">
                                                        <button class="btn-link" ng-click="AddAll()" type="button">Add All</button></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (var field in Model.Fields) {
                                                    string fieldName = field.Name.Text;
                                                    <tr>
                                                        <td class="unselectedField" filed-type="@field.Type">@fieldName</td>
                                                        <td class="rightCell">
                                                            <span ng-class="LabelClass('@field.Type')">Added</span>
                                                            <span ng-style="ButtonStyle('@field.Type')" class=""style="line-height: 14px;">
                                                                <button class="btn-link" ng-click="addfield('@field.Type','@fieldName')" type="button" style="line-height: 14px;">Add</button>
                                                            </span>
                                                        </td>
                                                    </tr>
                                                }
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="span6">
                                    <div class="viewfields-widget">
                                        <h5>Drag and drop to reorder</h5>
                                        <input id="picklist" name="picklist" type="hidden" />
                                        <div class="sortable-list">
                                            <ul id="sortable">
                                                <li ng-repeat="selectedColumn in SelectedColumns" style=""><span style="margin-left: 3px;">{{selectedColumn.DisplayName}}</span>
                                                    <div class="pull-right">
                                                        <button class="btn-link" type="button" ng-click="removefield($index)">Remove</button>
                                                    </div>
                                                </li>

                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12 sortedbyspan">
                                <div class="span8">
                                    <label class="control-label " for="sortby">Sorted By</label>
                                    <div class="controls" style="margin-left: 10px;">
                                        @Html.DropDownListFor(m => m.SortedBy, sortedBy, string.Empty, new { @class = "span4", @id = "sortby" })
                                        @Html.DropDownListFor(m => m.SortMode, sortMode, string.Empty, new { @class = "span4", @id = "sortmode" })
                                        <input type="button" class="btn" name="Preview" value="Preview" ng-click="preview()" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    }
    <div class="row-fluid" data-ag-grid="gridOptions" data-ag-grid-name="previewList"> </div>
</section>
<script>
    $(function () {
        $("#main-content").css("margin-top", $("#page-title").outerHeight(true));
        $("#page-actions h1 span").attr("title", $("#page-actions h1 span").html());
    });
</script>

